<!--
  Copyright JS Foundation and other contributors, http://js.foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/html" data-template-name="split">
    <!-- <div class="form-row"><span data-i18n="[html]split.intro"></span></div> -->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-row">
        <label for="node-input-property"><i class="fa fa-forward"></i> <span data-i18n="split.split"></span></label>
        <input type="text" id="node-input-property" style="width:70%;"/>
    </div>
    <div class="form-row"><span data-i18n="[html]split.strBuff"></span></div>
    <div class="form-row">
        <label for="node-input-splt" style="padding-left:10px; margin-right:-10px;" data-i18n="split.splitUsing"></label>
        <input type="text" id="node-input-splt" style="width:70%">
        <input type="hidden" id="node-input-spltType">
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-stream" style="margin-left:10px; vertical-align:top; width:auto;">
        <label for="node-input-stream" style="width:auto;" data-i18n="split.stream"></label>
    </div>
    <div class="form-row"><span data-i18n="[html]split.array"></span></div>
    <div class="form-row">
        <label for="node-input-arraySplt" style="padding-left:10px; margin-right:-10px;" data-i18n="split.splitUsing"></label>
        <input type="text" id="node-input-arraySplt" style="width:70%">
        <input type="hidden" id="node-input-arraySpltType">
    </div>
    <div class="form-row"><span data-i18n="[html]split.object"></span></div>
    <div class="form-row" style="padding-left: 10px"><span data-i18n="[html]split.objectSend"></span></div>
    <div class="form-row">
        <input type="checkbox" id="node-input-addname-cb" style="margin-left:10px; vertical-align:baseline; width:auto;">
        <label for="node-input-addname-cb" style="width:auto;" data-i18n="split.addname"></label>
        <input type="text" id="node-input-addname" style="width:70%">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('split',{
        category: 'sequence',
        color:"#E2D96E",
        defaults: {
            name: {value:""},
            splt: {value:"\\n"},
            spltType: {value:"str"},
            arraySplt: {value:1},
            arraySpltType: {value:"len"},
            stream: {value:false},
            addname: {value:"", validate: RED.validators.typedInput({ type: 'msg', allowBlank: true })},
            property: {value:"payload",required:true}
        },
        inputs:1,
        outputs:1,
        icon: "split.svg",
        label: function() {
            return this.name||this._("split.split");
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            if (this.property === undefined) {
                $("#node-input-property").val("payload");
            }
            $("#node-input-property").typedInput({default:'msg',types:['msg']});
            $("#node-input-splt").typedInput({
                default: 'str',
                typeField: $("#node-input-spltType"),
                types:[
                    'str',
                    'bin',
                    {value:"len", label:RED._("node-red:split.splitLength"),validate:/^\d+$/}
                ]
            });
            if (this.arraySplt === undefined) {
                $("#node-input-arraySplt").val(1);
            }
            $("#node-input-arraySplt").typedInput({
                default: 'len',
                typeField: $("#node-input-arraySpltType"),
                types:[
                    {value:"len", label:RED._("node-red:split.splitLength"),validate:/^\d+$/}
                ]
            });
            $("#node-input-addname").typedInput({
                typeField: $("#node-input-fnameType"),
                types:['msg']
            });

            $("#node-input-addname-cb").on("change", function() {
                $("#node-input-addname").prop('disabled',!this.checked);
            })
            if (this.addname === "") {
                $("#node-input-addname-cb").prop('checked',false);
                $("#node-input-addname").val('topic');
            } else {
                $("#node-input-addname-cb").prop('checked',true);
            }
            $("#node-input-addname-cb").change();
        },
        oneditsave: function() {
            if (!$("#node-input-addname-cb").prop('checked')) {
                $("#node-input-addname").val('');
            }
        }
    });
</script>


<script type="text/html" data-template-name="join">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
    <div class="form-row">
        <label data-i18n="join.mode.mode"></label>
        <select id="node-input-mode" style="width:200px;">
            <option value="auto" data-i18n="join.mode.auto"></option>
            <option value="custom" data-i18n="join.mode.custom"></option>
            <option value="reduce" data-i18n="join.mode.reduce"></option>
        </select>
    </div>
    <div class="node-row-custom">
        <div class="form-row node-row-property">
            <label data-i18n="join.combine"> </label>
            <input type="text" id="node-input-property" style="width:70%;">
            <input type="hidden" id="node-input-propertyType">
        </div>
        <div class="form-row">
            <label data-i18n="join.create"></label>
            <select id="node-input-build" style="width:70%;">
                <option value="string" data-i18n="join.type.string"></option>
                <option value="buffer" data-i18n="join.type.buffer"></option>
                <option value="array" data-i18n="join.type.array"></option>
                <option value="object" data-i18n="join.type.object"></option>
                <option value="merged" data-i18n="join.type.merged"></option>
            </select>
        </div>
        <div class="form-row node-row-key">
            <label style="vertical-align:top; margin-top:7px; width:auto; margin-right: 5px;" data-i18n="join.using"></label>
            <div style="display:inline-block">
                <input type="text" id="node-input-key" style="width:220px;"> <span data-i18n="join.key"></span>
            </div>
        </div>
        <div class="form-row node-row-joiner">
            <label for="node-input-joiner" data-i18n="join.joinedUsing"></label>
            <input type="text" id="node-input-joiner" style="width:70%">
            <input type="hidden" id="node-input-joinerType">
        </div>

        <div class="form-row">
            <input type="checkbox" id="node-input-useparts" style="margin-left:8px; margin-right:8px; vertical-align:baseline; width:auto;">
            <label for="node-input-useparts" style="width:auto;" data-i18n="join.useparts"></label>
        </div>

        <div class="form-row node-row-trigger" id="trigger-row">
            <label style="width:auto;" data-i18n="join.send"></label>
            <ul>
                <li>
                    <label style="width:280px;" for="node-input-count" data-i18n="join.afterCount"></label> <input id="node-input-count" data-i18n="[placeholder]join.count" type="text" style="width:75px;">
                </li>
                <li class="node-row-accumulate" style="list-style-type:none;">
                    <input type="checkbox" id="node-input-accumulate" style="display:inline-block; width:20px; margin-left:20px; vertical-align:top;">  <label style="width: auto" for="node-input-accumulate" data-i18n="join.subsequent"></label>
                </li>
                <li>
                    <label style="width:280px;" for="node-input-timeout" data-i18n="join.afterTimeout"></label> <input id="node-input-timeout" data-i18n="[placeholder]join.seconds" type="text" style="width:75px;">
                </li>
                <li>
                    <label style="width:auto; padding-top:6px;" data-i18n="[html]join.complete"></label>
                </li>
            </ul>
        </div>
    </div>
    <div class="node-row-reduce">
        <div class="form-row">
            <label for="node-input-reduceExp" data-i18n="join.reduce.exp" style="margin-left:10px;"></label>
            <input type="text" id="node-input-reduceExp" data-i18n="[placeholder]join.reduce.exp-value" style="width:65%">
        </div>
        <div class="form-row">
            <label for="node-input-reduceInit" data-i18n="join.reduce.init" style="margin-left:10px;"></label>
            <input type="text" id="node-input-reduceInit" data-i18n="[placeholder]join.reduce.init" style="width:65%">
            <input type="hidden" id="node-input-reduceInitType">
        </div>
        <div class="form-row">
            <label for="node-input-reduceFixup" data-i18n="join.reduce.fixup" style="margin-left:10px;"></label>
            <input type="text" id="node-input-reduceFixup" data-i18n="[placeholder]join.reduce.exp-value" style="width:65%">
        </div>
        <div class="form-row">
            <label>&nbsp;</label>
            <input type="checkbox" id="node-input-reduceRight" style="display:inline-block; width:auto; vertical-align:top; margin-left:10px;">
            <label for="node-input-reduceRight" style="width:70%;" data-i18n="join.reduce.right" style="margin-left:10px;"/>
        </div>
    </div>
    <div class="form-tips form-tips-auto hide" data-i18n="[html]join.tip"></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('join',{
        category: 'sequence',
        color:"#E2D96E",
        defaults: {
            name: {value:""},
            mode: {value:"auto"},
            build: { value:"object"},
            property: {
                value:"payload",
                label: RED._("node-red:join.message-prop"),
                validate:RED.validators.typedInput("propertyType", false)
            },
            propertyType: { value:"msg"},
            key: {value:"topic", validate: (function () {
                const typeValidator = RED.validators.typedInput({ type: 'msg' })
                return function(v, opt) {
                    const joinMode = $("#node-input-mode").val() || this.mode
                    if (joinMode !== 'custom') {
                        return true
                    }
                    const buildType = $("#node-input-build").val() || this.build
                    if (buildType !== 'object') {
                        return true
                    } else {
                        return typeValidator(v, opt)
                    }
                }
                })()
            },
            joiner: { value:"\\n"},
            joinerType: { value:"str"},
            useparts: { value:false },
            accumulate: { value:"false" },
            timeout: {value:""},
            count: {value:""},
            reduceRight: {value:false},
            reduceExp: {value:undefined},
            reduceInit: {value:undefined},
            reduceInitType: {value:undefined},
            reduceFixup: {value:undefined}
        },
        inputs:1,
        outputs:1,
        icon: "join.svg",
        label: function() {
            var nam = this.name||this._("join.join");
            if (this.mode === "custom" && !isNaN(Number(this.count))) {
                nam += " "+this.count;
                if (this.accumulate === true) { nam+= "+"; }
            }
            return nam;
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            var node = this;
            $("#node-input-useparts").on("change", function(e) {
                if (node.useparts === undefined) {
                    node.useparts = true;
                    $("#node-input-useparts").attr('checked', true);
                }
            });

            $("#node-input-mode").on("change", function(e) {
                var val = $(this).val();
                $(".node-row-custom").toggle(val==='custom');
                $(".node-row-reduce").toggle(val==='reduce');
                $(".form-tips-auto").toggle((val==='auto') || (val==='reduce'));
                if (val === "auto") {
                    $("#node-input-accumulate").attr('checked', false);
                }
                else if (val === "custom") {
                    $("#node-input-build").change();
                }
                else if (val === "reduce") {
                    var jsonata_or_empty = {
                        value: "jsonata",
                        label: "expression",
                        icon: "red/images/typedInput/expr.svg",
                        validate: function(v) {
                            try{
                                if(v !== "") {
                                    jsonata(v);
                                }
                                return true;
                            }
                            catch(e){
                                return false;
                            }
                        },
                        expand:function() {
                            var that = this;
                            RED.editor.editExpression({
                                value: this.value().replace(/\t/g,"\n"),
                                complete: function(v) {
                                    that.value(v.replace(/\n/g,"\t"));
                                }
                            })
                        }
                    };
                    $("#node-input-reduceExp").typedInput({types:[jsonata_or_empty]});
                    $("#node-input-reduceInit").typedInput({
                        default: 'num',
                        types:['flow','global','str','num','bool','json','bin','date','jsonata','env'],
                        typeField: $("#node-input-reduceInitType")
                    });
                    $("#node-input-reduceFixup").typedInput({types:[jsonata_or_empty]});
                }
            });

            $("#node-input-build").on("change", function(e) {
                var val = $(this).val();
                $(".node-row-key").toggle(val==='object');
                $(".node-row-accumulate").toggle(val==='object' || val==='merged');
                $(".node-row-joiner").toggle(val==='string' || val==='buffer');
                $(".node-row-trigger").toggle(val!=='auto');
                if (val === 'string' || val==='buffer') {
                    $("#node-input-property").typedInput('types',['msg']);
                    $("#node-input-joiner").typedInput("show");
                } else {
                    $("#node-input-property").typedInput('types', ['msg', {
                        value: "full",
                        label: RED._("node-red:join.completeMessage"),
                        hasValue: false
                    }]);
                }
            });

            $("#node-input-joiner").typedInput({
                default: 'str',
                typeField: $("#node-input-joinerType"),
                types:['str', 'bin']
            });

            $("#node-input-property").typedInput({
                typeField: $("#node-input-propertyType"),
                types: ['msg', {
                    value: "full",
                    label: RED._("node-red:join.completeMessage"),
                    hasValue: false
                }]
            });

            $("#node-input-key").typedInput({
                types:['msg']
            });

            $("#node-input-build").change();
            $("#node-input-mode").change();
        },
        oneditsave: function() {
            var build = $("#node-input-build").val();
            if (build !== 'object' && build !== 'merged') {
                $("#node-input-accumulate").prop("checked",false);
            }
        }
    });
</script>
